<template>
  <div class="det">
    <van-nav-bar
      :title="desc"
      left-text="返回"
      right-text="分类"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="to()"
    />
    <van-swipe :autoplay="2000" indicator-color="white"> 
  <van-swipe-item v-for="(image, index) in arr.imgarr" :key="index"  >
    <img class="ims" :src="image" style="width: 100vw;"/>
  </van-swipe-item>
</van-swipe>
<van-card
          class="cards"
         
          :price="arr.price+'.00'"
          :desc="arr.tintro"
          :title="arr.tname"
          :thumb="arr.fullSrc"
        >
          <!-- <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template> -->
          <template #footer>
            <!-- <van-button @click.stop="addcar(arr)" type="primary" size="mini"></van-button> -->
           
          </template>
        </van-card>
        <img :src="arr.banner" alt="" style="width: 100vw;">
        <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" @click.stop="tels"  />
  <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" @click.stop="onClickIcon"  />
  <van-goods-action-button
  color="linear-gradient(to right, yellowgreen, green)"
    text="加入购物车"
    type="warning"
    bind:click=""
    @click.stop="addcar(arr)"
  />
  <!-- <van-goods-action-button text="立即购买" bind:click="onClickButton" /> -->
</van-goods-action>

  </div>



</template>
<script>
import { Toast } from 'vant';
import { detData } from '@/api';
import {addCar} from '@/api';
import {get} from '@/utils/local'

export default {
    components: {},
    props: {},
    data() {
        return {
          title:'',
          Imgarr:[],
          arr:{
            addtime:'',
            banner:'',
            cid:'',
            fullSrc:'',
            imgarr:'',
            price:'',//
            tid:'',//
            timg:'',//
            tintro:'',
            tname:'',//
            xs_number:'',
          },

        };
    },
    computed: {
      desc(){
        return this.arr.tname+'详情'
      }
    },
    created() {},
    mounted() {
      this.getData()
    },
    methods: {
 
      async getData(){
        let res=await detData(this.$route.query)
        console.log(res);
        if(res.code==200){
            this.arr={...res.data}
            // console.log(this.arr);
            
            
        }
        
      },
      to(){
        this.$router.push('/index/cate')
      },
      onClickIcon(){
        this.$router.push('/index/car')
        
      },
      tels(){
        window.location.href = `tel:13212742015`;
      },
            async addcar(v){// 加入购物车
          //判断是否登录
          //跳路由
          if(this.$checkLogin())return// 没有登录 就不执行以下逻辑
          //  console.log(v);
          let {tid,tname,timg,price}=v
          let item={uid:get("userinfo").uid,tid,tname,timg,price,pnum:1,ischeck:1}
          let res= await addCar(item)
          console.log(res);
       Toast("加入购物车成功")

          
          
        },

      // async addcar(arr){
      //   this.addcararr.uid=this.arr.cid;
      //  this.addcararr.tid=this.arr.tid;
      //  this.addcararr.tname=this.arr.tname;
      //  this.addcararr.timg=this.arr.timg;
      //  this.addcararr.price=this.arr.price;
      //   let res=await addCar(this.addcararr)

      //   console.log(res);
      // }
    },
    watch: {},
};
</script>
<!-- 
  // 样式穿透 >>> /deep/
 -->
<style scoped lang="less">

.det /deep/ .van-nav-bar__left .van-nav-bar__text  {
  color: yellowgreen;
  
}
.det /deep/ .van-nav-bar__right .van-nav-bar__text  {
  color: yellowgreen;

}
.det /deep/ .van-icon-arrow-left{
  color: yellowgreen;

}
.det{
  width: 100vw;

  height: 100vh;
  background:yellowgreen;
  .ims{

  opacity: 0.7;

}
.cards{
  border-top: 20px solid white;
  border-bottom: 20px solid white;
  margin-top: -20px;
}
}


</style>
